<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 80%"></div>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    function bindData(){
        $.ajax({
            async: true,
            url: '../v1/pub/showData',
            type: 'get',
            dataType: 'json',
            data: {},
            success:function(echartData){
                console.log(echartData.toString());
                if(echartData){
                    myChart.setOption({
                        tooltip: {
                            show: true
                        },
                        legend: {
                            data:['显示']
                        },
                        xAxis : [
                            {
                                type : 'category',
                                data : getTime(echartData)
                            }
                        ],
                        yAxis : [
                            {
                            	type: 'value',
                                scale: true,
                                name: '浓度',
                                max: 50,
                                min: 10,
                                boundaryGap: [0.2, 0.2]
                            }
                        ],
                        series : [
                            {
                                "name":"浓度",
                                "type":"bar",
                                "data":getConcentration(echartData)
                            }
                        ]
                    });
                    myChart.hideLoading();	//loading hidden
                    	//loading hidden
                    	//loading hidden
                }
            }
        })
    }
    function getTime(jo){
            var time = [];
            for(var i in jo){
                time[i] = jo[i].time;
            }
            return time;
    }
    function getConcentration(jo){
        var concentration = [];
        for(var i in jo){
        	concentration[i] = jo[i].value;
        }
        return concentration;
}
    bindData();
</script>
</body>
</html>